<template>
  <div id="brand">
    <div class="img-container" :style="{ backgroundImage: `url(${brandGoods.pic_url})`}">
      <div class="brand-name">{{brandGoods.name}}</div>
    </div>
    <div class="content">
      <div class="desc">{{brandGoods.simple_desc}}</div>
    </div>
    <div class="flex">
      <div class="flex-item" v-for="(item1,index1) in brandGoods.goods" :key="index1" @click="onClickGood(item1.id)">
        <van-image width="80%" height="100" :src="item1.list_pic_url">
          <template v-slot:loading>
            <van-loading type="spinner" size="20" />
          </template>
        </van-image>
        <div class="name">{{item1.name}}</div>
        <div class="retail_price">{{item1.retail_price}}</div>
        <div class="market_price">{{item1.market_price}}</div>
        <div></div>
      </div>
      
    </div>
    <van-empty v-if="brandGoods.goods.length==0"
      class="empty-data"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="暂时没有商品"
    />
  </div>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  #brand{
    width: 100%;
    height: 100%;
    .content{
      width: 100%;
      text-align: center;
      background-color: rgba(187, 180, 180, 0.281);
      margin-top: 5px;
      .desc{
        font-size: 0.8rem;
        color: grey;
        padding: 10px 20px;
        line-height: 1.4rem;
      }
    }
    .img-container{
      width: 100%;
      height: 150px;
      background-repeat: no-repeat;
      background-size: 100% 150px;
      background-origin: 0 0;
      text-align: center;
      .brand-name{
        font-size: 1.2rem;
        color: brown;
        padding-top: 60px;
      }
    }
    .flex{
      display: flex;
      flex-flow: row wrap;
      width: 100%;
      .flex-item{
        flex: 0 0 32%;
        margin: 2px;
        text-align: center;
        .name{
          width: 90px;
          margin: auto;
          //height: 20px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          height: 25px;
        }
        .retail_price{
          color: red;
          margin-top: 8px;
        }
        .market_price{
          color: gray;
          text-decoration:line-through;
          margin-top: 4px;
          font-size: 0.9rem;
        }
      }
    }
  }
  .empty-data .van-empty__image{
    width: 90px!important;
    height: 90px!important;
  }
</style>

<script lang="ts">
// @ is an alias to /src
import { Image as VanImage,Empty } from 'vant';
import { Component, Prop, Vue, Watch, Model } from 'vue-property-decorator';
import router from '../router';
import store from '../store/index';

Vue.use(VanImage).use(Empty);
@Component
export default class BrandComponent extends Vue {
  private brand_id: string = '0';
  private brandGoods: any = {
    goods:[]
  };
  
  async created(){
    this.brand_id=router.currentRoute.params.id;
    store.commit('global/setShowPageLoading',true);
    await store.dispatch('brands/getBrandGoods',this.brand_id);
    this.brandGoods=store.getters['brands/brandGoods'].data[0];
    router.currentRoute.meta.navTitle=this.brandGoods.name;
    store.commit('global/setShowPageLoading',false);
  }

  private onClickGood(id: string){
    router.push({
      path:`/goodDetail/${id}`
    });
  }
}
</script>
